<template>
  <!-- <el-upload
    :action="uploadOptions.url"
    :headers="uploadOptions.header"
    name="file"
    :show-file-list="false"
    :on-success="handleFileSuccess"
  >
    <el-button type="primary" size="small">点击上传</el-button>
  </el-upload> -->
  <div>
    <el-upload ref="upload" class="upload-demo" name="file" :headers="uploadOptions.header" :action="uploadOptions.url"
      :on-preview="handlePreview" :on-remove="handleRemove" :auto-upload="false" accept=".xls, .xlsx"
      :on-success="handleFileSuccess" :on-change="handleAvatarProgress" :on-error="handleError">
      <el-button slot="trigger" class="ml10 mr10" size="mini" type="primary">导入</el-button>
    </el-upload>
    <!-- <el-upload
      :action="uploadOptions.url"
      :headers="uploadOptions.header"
      class="avatar-uploader"
      name="file"
      accept="image/png, image/jpeg"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :on-change="handleAvatarProgress"
      :style="`width: ${width}; height: ${height}`"
    >
      <img
        v-if="imgUrl.absoluteUrl"
        :src="imgUrl.absoluteUrl"
        class="avatar"
        :style="`width: ${width}; height: ${height}`"
      >
      <i v-else class="el-icon-picture-outline avatar-uploader-icon" />
    </el-upload> -->
  </div>

</template>

<script>
import axios from 'axios';
import { getToken } from '@/utils/auth';
import exportUrl from '@/utils/exportUrl';
class UploadOptions {
  // url = this.url + 'person/imp';
  // url = process.env.VUE_APP_BASE_API + '/person/imp';
  url = window.server.SERVER_API[0].api + '/person/imp';
  header = {
    'Authentication': getToken('auth_key') ? getToken('auth_key') : '',
    'userId': getToken('session_id') ? getToken('session_id') : '',
    'clientType': 0
  }
}
export default {
  name: 'FileUpload',
  data () {
    return {
      uploadOptions: new UploadOptions(),
      imgUrl: '',
      url: exportUrl.url
    };
  },
  methods: {
    handleRemove (file, fileList) {
      console.log(file, fileList);
    },
    handlePreview (file) {
      console.log(file);
    },
    // 上传成功回调
    handleFileSuccess (res, file, fileList) {
      console.log(res);
      if (res) {
        console.log(res);
        if (res.code === 200) {
          const { save_name } = res.data;
          this.$emit('getUrl', save_name);
        }
      } else {
        this.$message.error('上传失败,请打开调试台查看失败原因');
        console.log(res);
      }
    },
    // 上传改变
    handleAvatarProgress (res) {
      console.log(res);
      // let data = axios.post(process.env.VUE_APP_BASE_API + '/person/imp', {

      //   headers: {
      //     'Authentication': getToken('auth_key') ? getToken('auth_key') : '',
      //     'userId': getToken('session_id') ? getToken('session_id') : '',
      //     'clientType': 0,
      //     'Content-Type': 'multipart/form-data'
      //   },
      //   params: {
      //     file: res.raw
      //   }
      // });
      // console.log(data);
    },
    // 上传图片失败回调
    handleError (res) {
      console.log(res);
    }
  }
};
</script>
<style lang="scss" scoped>
.upload-demo {
  // display: inline-block;
}
</style>
